<template>
  <view class="container">
    <!-- 顶部状态栏 -->
    <view class="status-bar">
      <view class="status-bar-left">{{ currentTime }}</view>
      <view class="status-bar-right">
        <text class="iconfont icon-signal"></text>
        <text class="iconfont icon-wifi"></text>
        <text class="iconfont icon-battery-full"></text>
      </view>
    </view>
    
    <!-- 导航栏 -->
    <view class="nav-bar">
      <view class="nav-bar-title">相册</view>
      <view class="nav-bar-actions">
        <text class="iconfont icon-search" @click="handleSearch"></text>
        <text class="iconfont icon-camera" @click="handleCamera"></text>
      </view>
    </view>
    
    <!-- 应用内容区 -->
    <scroll-view class="app-content" scroll-y enable-flex refresher-enabled
      :refresher-triggered="isRefreshing" @refresherrefresh="onRefresh">
      
      <!-- 相册网格 -->
      <view class="photo-grid">
        <view class="photo-album" v-for="(album, index) in albums" :key="index" @click="openAlbum(album)">
          <image :src="album.coverImage" mode="aspectFill"></image>
          <view class="album-info">
            <view class="album-title">{{ album.title }}</view>
            <view class="album-count">{{ album.count }}张</view>
          </view>
        </view>
      </view>
      
      <!-- 最近照片 -->
      <view class="recent-photos">
        <view class="recent-header">
          <view class="section-title">最近照片</view>
          <view class="view-all" @click="viewAllRecent">查看全部</view>
        </view>
        
        <view class="recent-photos-grid">
          <view class="recent-photo" v-for="(photo, index) in recentPhotos" :key="index" @click="previewPhoto(photo, index)">
            <image :src="photo.url" mode="aspectFill"></image>
          </view>
        </view>
      </view>
      
      <!-- 底部占位区域，防止内容被TabBar遮挡 -->
      <view class="tab-bar-placeholder"></view>
    </scroll-view>
    
    <!-- 使用TabBar组件 -->
    <tab-bar :active-tab="'photos'" @change="handleTabChange" />
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';
import TabBar from '@/components/TabBar.vue';
import { navigateToTab } from '@/utils/navigation';

// 下拉刷新状态
const isRefreshing = ref(false);

// 当前时间
const currentTime = ref('9:41');

// 相册数据
const albums = ref([
  {
    id: 1,
    title: '最近添加',
    count: 243,
    coverImage: '/static/images/album-recent.jpg'
  },
  {
    id: 2,
    title: '收藏',
    count: 56,
    coverImage: '/static/images/album-favorites.jpg'
  },
  {
    id: 3,
    title: '家庭',
    count: 189,
    coverImage: '/static/images/album-family.jpg'
  },
  {
    id: 4,
    title: '旅行',
    count: 324,
    coverImage: '/static/images/album-travel.jpg'
  }
]);

// 最近照片数据
const recentPhotos = ref([
  { id: 1, url: '/static/images/photo1.jpg' },
  { id: 2, url: '/static/images/photo2.jpg' },
  { id: 3, url: '/static/images/photo3.jpg' },
  { id: 4, url: '/static/images/photo4.jpg' },
  { id: 5, url: '/static/images/photo5.jpg' },
  { id: 6, url: '/static/images/photo6.jpg' },
  { id: 7, url: '/static/images/photo7.jpg' },
  { id: 8, url: '/static/images/photo8.jpg' }
]);

// 更新时间的函数
const updateTime = () => {
  const now = new Date();
  const hours = now.getHours().toString().padStart(2, '0');
  const minutes = now.getMinutes().toString().padStart(2, '0');
  currentTime.value = `${hours}:${minutes}`;
};

// 定时器
let timer: number;

// 页面加载时启动定时器
onMounted(() => {
  updateTime(); // 初始更新一次
  timer = setInterval(updateTime, 60000); // 每分钟更新一次
});

// 页面卸载时清除定时器
onUnmounted(() => {
  clearInterval(timer);
});

// 处理TabBar组件的切换事件
const handleTabChange = (tab: string) => {
  if (tab !== 'photos') {
    // 使用导航工具跳转到对应页面
    navigateToTab(tab);
  }
};

// 打开相册
const openAlbum = (album: any) => {
  console.log('打开相册', album);
  uni.showToast({
    title: `打开相册: ${album.title}`,
    icon: 'none'
  });
};

// 查看全部最近照片
const viewAllRecent = () => {
  console.log('查看全部最近照片');
  uni.showToast({
    title: '查看全部最近照片',
    icon: 'none'
  });
};

// 预览照片
const previewPhoto = (photo: any, index: number) => {
  const urls = recentPhotos.value.map(p => p.url);
  uni.previewImage({
    current: index,
    urls: urls
  });
};

// 处理搜索
const handleSearch = () => {
  uni.showToast({
    title: '搜索功能开发中',
    icon: 'none'
  });
};

// 处理相机
const handleCamera = () => {
  uni.chooseImage({
    count: 1,
    sizeType: ['original', 'compressed'],
    sourceType: ['camera'],
    success: (res) => {
      console.log('拍照成功', res.tempFilePaths);
      // 拍照成功后添加到最近照片
      const newPhoto = {
        id: Date.now(),
        url: res.tempFilePaths[0]
      };
      recentPhotos.value.unshift(newPhoto);
      
      uni.showToast({
        title: '照片已添加到最近照片',
        icon: 'success'
      });
    }
  });
};

// 下拉刷新处理
const onRefresh = () => {
  isRefreshing.value = true;
  
  // 模拟刷新数据
  setTimeout(() => {
    // 更新照片计数
    albums.value = albums.value.map(album => ({
      ...album,
      count: album.count + Math.floor(Math.random() * 5)
    }));
    
    // 结束刷新状态
    isRefreshing.value = false;
    
    uni.showToast({
      title: '刷新成功',
      icon: 'success'
    });
  }, 1500);
};
</script>

<style>
/* 全局样式变量 */
page {
  --primary-color: #2196F3;
  --secondary-color: #03A9F4;
  --accent-color: #FF9800;
  --text-color: #333;
  --light-gray: #f5f5f5;
  --medium-gray: #e0e0e0;
  --dark-gray: #9e9e9e;
  --danger-color: #f44336;
  --success-color: #4CAF50;
  background-color: #fff;
  color: var(--text-color);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  position: relative;
}

/* 顶部状态栏样式 */
.status-bar {
  height: 60rpx;
  width: 100%;
  background-color: #000;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20rpx;
  font-size: 24rpx;
  /* 适配顶部安全区 */
  padding-top: constant(safe-area-inset-top);
  padding-top: env(safe-area-inset-top);
}

.status-bar-right {
  display: flex;
  align-items: center;
}

.status-bar-right text {
  margin-left: 8rpx;
  font-size: 24rpx;
}

/* 导航栏样式 */
.nav-bar {
  height: 80rpx;
  width: 100%;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24rpx;
  border-bottom: 1px solid var(--medium-gray);
}

.nav-bar-title {
  font-size: 32rpx;
  font-weight: 600;
}

.nav-bar-actions {
  display: flex;
  align-items: center;
}

.nav-bar-actions text {
  margin-left: 20rpx;
  font-size: 36rpx;
}

/* 应用内容区样式 */
.app-content {
  flex: 1;
  overflow-y: auto;
}

/* 相册网格 */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20rpx;
  padding: 24rpx;
}

.photo-album {
  position: relative;
  border-radius: 24rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.1);
}

.photo-album image {
  width: 100%;
  height: 340rpx;
  display: block;
}

.album-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20rpx;
  background: linear-gradient(transparent, rgba(0,0,0,0.7));
  color: white;
}

.album-title {
  font-weight: 600;
  font-size: 28rpx;
  margin-bottom: 4rpx;
}

.album-count {
  font-size: 22rpx;
  opacity: 0.9;
}

/* 最近照片 */
.recent-photos {
  margin-top: 40rpx;
  margin-bottom: 20rpx;
}

.recent-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24rpx;
  margin-bottom: 20rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: 600;
}

.view-all {
  color: var(--primary-color);
  font-size: 24rpx;
}

.recent-photos-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8rpx;
  padding: 0 24rpx;
}

.recent-photo {
  aspect-ratio: 1/1;
  border-radius: 8rpx;
  overflow: hidden;
}

.recent-photo image {
  width: 100%;
  height: 100%;
}

/* 底部占位区域 */
.tab-bar-placeholder {
  height: 100rpx;
  /* 适配底部安全区 */
  margin-bottom: constant(safe-area-inset-bottom);
  margin-bottom: env(safe-area-inset-bottom);
}
</style> 